<script setup lang="ts">
import { onMounted, ref } from 'vue'

// 通知详情数据
const notification = ref({
})

// 获取图标类名
function getIconClass(type: string) {
  const iconMap = {
    system: 'icon-notification',
    borrow: 'icon-book',
    interaction: 'icon-comment',
  }
  return iconMap[type] || 'icon-notification'
}

// 处理操作按钮点击
function handleAction(action: any) {
  if (action.url) {
    uni.navigateTo({
      url: action.url,
    })
  }
}

// 处理链接点击
function goToLink(link: any) {
  if (link.url) {
    uni.navigateTo({
      url: link.url,
    })
  }
}

// 获取通知详情
async function getNotificationDetail(id: number) {
  try {
    const res = await uni.request({
      url: `/api/notification/${id}`,
      method: 'GET',
    })
    if (res.statusCode === 200) {
      notification.value = res.data
    }
    else {
      throw new Error(res.data.message || '加载失败')
    }
  }
  catch (error) {
    uni.showToast({
      title: error.message,
      icon: 'none',
    })
  }
}

// 页面加载时获取数据
onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const id = currentPage.$page?.options?.id
  if (id) {
    getNotificationDetail(Number(id))
  }
})
</script>

<template>
  <view class="container">
    <!-- 通知内容 -->
    <view class="notification-card">
      <view class="notification-header">
        <view class="notification-icon" :class="notification.type">
          <text class="iconfont" :class="getIconClass(notification.type)" />
        </view>
        <view class="notification-info">
          <text class="title">
            {{ notification.title }}
          </text>
          <text class="time">
            {{ notification.createTime }}
          </text>
        </view>
      </view>

      <view class="notification-content">
        <text>{{ notification.content }}</text>
      </view>

      <!-- 相关操作 -->
      <view v-if="notification.actions" class="notification-actions">
        <button
          v-for="(action, index) in notification.actions"
          :key="index"
          class="action-btn"
          :class="action.type"
          @click="handleAction(action)"
        >
          {{ action.text }}
        </button>
      </view>
    </view>

    <!-- 相关链接 -->
    <view v-if="notification.links" class="related-links">
      <view
        v-for="(link, index) in notification.links"
        :key="index"
        class="link-item"
        @click="goToLink(link)"
      >
        <text class="link-title">
          {{ link.title }}
        </text>
        <text class="iconfont icon-arrow-right" />
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.container {
  padding: 20rpx;
}

.notification-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;

  .notification-header {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;

    .notification-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 20rpx;

      &.system {
        background: #e3f2fd;
        color: #2196f3;
      }

      &.borrow {
        background: #e8f5e9;
        color: #4caf50;
      }

      &.interaction {
        background: #fff3e0;
        color: #ff9800;
      }

      .iconfont {
        font-size: 40rpx;
      }
    }

    .notification-info {
      flex: 1;

      .title {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
        margin-bottom: 10rpx;
        display: block;
      }

      .time {
        font-size: 24rpx;
        color: #999;
      }
    }
  }

  .notification-content {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30rpx;
  }

  .notification-actions {
    display: flex;
    gap: 20rpx;

    .action-btn {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 40rpx;
      font-size: 28rpx;

      &.primary {
        background: #4caf50;
        color: #fff;
      }

      &.default {
        background: #f5f5f5;
        color: #666;
      }
    }
  }
}

.related-links {
  background: #fff;
  border-radius: 12rpx;
  padding: 0 30rpx;

  .link-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .link-title {
      font-size: 28rpx;
      color: #333;
    }

    .iconfont {
      font-size: 32rpx;
      color: #999;
    }
  }
}
</style>
